<template>
	<view class="wrap">
		<view class="name">社区信息</view>
		<u--form :model="form" ref="uForm" :rules="rules" labelWidth="65">
			<u-form-item label="城市" prop="cityName" @click="selectAddress('1')">
				<u--input v-model="form.cityName" disabled disabledColor="transparent" placeholder="请选择城市" border="none"></u--input>
			</u-form-item>
			<u-form-item label="地区/镇" prop="sareaName" @click="selectAddress('2')">
				<u--input v-model="form.sareaName" disabled disabledColor="transparent" placeholder="请选择地区/镇" border="none"></u--input>
			</u-form-item>
			<u-form-item label="地址" prop="address">
				<u-input v-model="form.address" border="none" placeholder="请输入地址" />
			</u-form-item>
			<u-form-item label="社区名称" prop="district">
				<u-input v-model="form.district" border="none" placeholder="请输入社区名称" />
			</u-form-item>
		</u--form>
		<view class="div" style="margin-top: 70rpx">
			<u-button  shape="circle" type="success" color="#21B579" @click="submit">提交</u-button>
		</view>
		<!-- <itmister-address-picker ref="addressEl" @confirmChange="confirmChange"></itmister-address-picker> -->
		<u-picker :show="showPicker" :columns="columns" keyName="name" @confirm="confirm" @cancel="cancel"></u-picker>
	</view>
</template>

<script>
// import itmisterAddressPicker from '@/components/itmister-address-picker/itmister-address-picker.nvue';
export default {
	// components: {
	// 	itmisterAddressPicker
	// },
	props:{
		addrObj:{
			type:Object
		}
	},
	data() {
		return {
			form: {
				province: '',
				city: '',
				sarea: '',
				// location: '',
				address: '',
				district: '',
				cityName:'',
				sareaName:'',
			},
			selecType:'1',
			showPicker: false,
			columns: [],
			cityList: [],
			areaList: [],
			columnData: {},
			rules: {
				cityName: [
					{
						required: true,
						message: '请选择城市',
						trigger: ['blur', 'change']
					}
				],
				sareaName: [
					{
						required: true,
						message: '请选择地区/镇',
						trigger: ['blur', 'change']
					}
				],
				address: [
					{
						required: true,
						message: '请输入地址',
						trigger: ['blur', 'change']
					}
				],
				district: [
					{
						required: true,
						message: '请输入社区名称',
						trigger: ['blur', 'change']
					}
				]
			}
		};
	},
	mounted(options) {
		// this.$nextTick(()=>{
		// 	console.log(this.addrObj)
		// })
		
		// debugger
		this.getCity();
		
	},
	methods: {
		submit() {
			this.$refs.uForm
				.validate()
				.then((res) => {
					// uni.$u.toast('校验通过');
					const params = JSON.parse(JSON.stringify(this.form));
					delete params.cityName;
					delete params.sareaName;
					// console.log(params)
					this.$emit('submitAddr', params);
					console.log(this.form);
				})
				.catch((errors) => {
					uni.$u.toast('校验失败');
				});
		},
		initData(addrObj){
			// console.log(addrObj)
			if (addrObj) {
				const data = addrObj;
				this.form={
					province: addrObj.province,
					city: addrObj.city,
					sarea: addrObj.sarea,
					address: addrObj.address,
					district: addrObj.district,
					cityName:addrObj.city_name,
					sareaName:addrObj.area_name,
				}
			}
		},
		// 获取首页地市
		getCity() {
			this.$api.get('/common/area').then((res) => {
				// 因为现在只有上海市一个数据，所以先做了简单处理，因为不知道后续格式，先就这
				// console.log(res);
				this.columnData = res.data;
				this.cityList = [[{ name: res.data.name, id: res.data.id }]];
				this.areaList = [res.data.list]
				// console.log(this.areaList)
				this.columns = this.cityList
				// this.areaList = res.data.list;
			});
		},
		// 打开窗口
		selectAddress(type) {
			// console.log(type)
			this.selecType = type
			if(type==='1'){
				this.columns = this.cityList
			}else{
				this.columns = this.areaList
			}
			this.showPicker = true;
			// this.$refs.addressEl.show();
		},
		confirm(address){
			// console.log(address.value)
			let data = address.value[0]
			if(this.selecType==='1'){
				this.form.province = data.id;
				this.form.city = data.id;
				this.form.cityName = data.name;
			}else{
				
				this.form.sarea = data.id;
				this.form.sareaName = data.name;
			}
			// console.log(this.formName)
			this.showPicker = false
		},
		cancel(){
			this.showPicker = false
		},
		
		// // 确认选中
		// confirmChange(address) {
		// 	console.log(address);
				
			
		// 	this.form.province = address.province;
		// 	this.form.city = address.city;
		// 	this.form.sarea = address.area;
		// 	this.form.location = address.province + '/' + address.city + '/' + address.area;
		// }
	}
};
</script>
<style lang="scss" scoped>
page {
	background: #fff;
}
.name {
	text-align: center;
	color: #333;
	font-size: 32rpx;
	margin-bottom: 40rpx;
}
.wrap {
	box-sizing: border-box;
	padding: 20rpx 5%;
}
</style>
